<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Induction Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 10) {
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // Set common styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;

        // 1. Draw the long straight wire with current I
        const wireX = 100;
        ctx.beginPath();
        ctx.moveTo(wireX, 20);
        ctx.lineTo(wireX, 380);
        ctx.stroke();

        // Draw the current arrow and label 'I'
        drawArrow(ctx, wireX, 180, wireX, 140, 8);
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('I', wireX - 25, 170);

        // 2. Draw the metal rod AB
        const rodY = 200;
        const rodX1 = 160;
        const rodX2 = 380;
        const rodThickness = 12;
        ctx.fillRect(rodX1, rodY - rodThickness / 2, rodX2 - rodX1, rodThickness);

        // Add labels 'A' and 'B'
        ctx.font = '22px Times New Roman';
        ctx.fillText('A', rodX1, rodY + 30);
        ctx.fillText('B', rodX2 - 15, rodY + 30);

        // 3. Draw the velocity vector 'v'
        const rodCenterX = (rodX1 + rodX2) / 2;
        drawArrow(ctx, rodCenterX, rodY - rodThickness / 2, rodCenterX, rodY - 80);
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('v', rodCenterX - 25, rodY - 50);

        // 4. Add the bottom text "题 10 图"
        ctx.font = '24px "SimSun", "STSong"';
        ctx.textAlign = 'center';
        ctx.fillText('题 10 图', 270, 350);

    </script>
</body>
</html>